<template>
  <div class="api_home">
    <div class="api_home-li">
      <h1 class="api_home-h1">API 文档</h1>
      <div class="api_home-intro">API 遵循 REST 标准进行设计。<br>
        我们的 API 是 可预期的 以及 面向资源 的，接受 form-encoded 请求正文，返回 JSON-encoded 响应， 使用标准的 HTTP 响应代码 ，认证（OAuth 2.0）和参数。<br>
        所有请求和响应的编码均为 UTF-8。</div>
    </div>
    <div class="api_home-li">
      <h1 class="api_home-h2">基础路径</h1>
      <h2 class="api_home-1g1z64a">API BASE URL</h2>
      <ul class="list_ul">
        <li class="list_li">{{siteValue.host}}
          <div class="list_li-icon" title="复制" @click="copyTab(siteValue.host)">
            <i class="el-icon-document-copy"></i>
          </div>
          <span class="list_li-text">正式服务器</span>
        </li>
        <li class="list_li">{{siteValue.imgHost}}
          <div class="list_li-icon" title="复制" @click="copyTab(siteValue.imgHost)">
            <i class="el-icon-document-copy"></i>
          </div>
          <span class="list_li-text">图片地址</span>
        </li>
      </ul>
    </div>
    <div class="api_home-li">
      <h1 class="api_home-h2">调用说明</h1>
      <h2 class="api_home-p1">请求</h2>
      <p class="api_home-p2">所有的请求方式（Method）均与动词相关：</p>
      <ul class="css-box">
        <li class="css-tumect"><span class="css-lvcjra"><code>GET</code>：获取资源</span></li>
        <li class="css-tumect"><span class="css-lvcjra"><code>POST</code>：创建资源</span></li>
        <li class="css-tumect"><span class="css-lvcjra"><code>PUT</code>：更新资源</span></li>
        <li class="css-tumect"><span class="css-lvcjra"><code>PATCH</code>：更新资源的一个属性</span></li>
        <li class="css-tumect"><span class="css-lvcjra"><code>DELETE</code>：删除资源</span></li>
      </ul>
      <h3 class="api_home-p3">参数传入方式</h3>
      <p class="api_home-p4">如无特别说明，<code>GET</code> 请求参数需要放到 Url Query String 中：</p>
      <pre>GET https://petstore.com/api/v1/pets?pagesize=20</pre>
      <p class="api_home-p4"><code>POST/PUT/PATCH</code> 请求参数建议使用 JSON 格式将参数放到请求体中：</p>
      <pre>PUT https://petstore.com/api/v1/pets/1
Content-Type: application/json
{
  "id": 1,
  "category": {
    "name": "金毛",
    "id": 1
  },
  "status": "available",
  "photoUrls": [
    "http://petstore.com/1.png"
  ],
  "name": "doggie",
  "isHealthy": true,
  "tags": [
    {
      "id": 1,
      "name": "狗狗"
    }
  ]
}</pre>
    </div>
    <div class="api_home-li">
      <h2 class="api_home-p1">响应</h2>
      <p class="api_home-p2">成功响应中包含实体资源内容，如：</p>
      <pre>[
  {
    "a": "xxx",
    "b": "xxx"
  },
  {
    "c": "xxx",
    "d": "xxx"
   }
]</pre>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    data () {
      return {
        siteValue: ''
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        this.siteValue = ala
      },
      async copyTab (val) {
        var textArea = document.createElement('input')
        textArea.value = val
        document.body.appendChild(textArea)
        textArea.select()
        var successful = document.execCommand('copy')
        var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板'
        textArea.style.display = 'none'
        this.$message({
          message: msg,
          type: 'success'
        })
      }
    }
  }
</script>
<style lang="scss">
  @import "./api_home.scss";
</style>